<template>
  <div>
    <router-view></router-view>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 头部 -->
      <el-row class="card-head-row">
        <el-col :span="6">
          <div class="grid-content bg-purple-dark"></div>
          <el-input placeholder="请输入昵称" v-model="search.nickname" size="small">
            <el-button slot="append" icon="el-icon-search" @click="getUserlist"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="showAddUserDialog" size="small" icon="el-icon-plus">添加</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="list.data" stripe border size="small">
        <el-table-column
          prop="id"
          label="ID"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
        >
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
        >
        </el-table-column>
        <el-table-column
          prop="login_time"
          label="登录时间"
          :formatter="dateFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="login_ip"
          label="登录IP"
          :formatter="emptyFormatter"
        >
        </el-table-column>
        <el-table-column
          prop="register_ip"
          label="注册IP"
          :formatter="emptyFormatter"
        >
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="statusscope">
            <el-switch
              :value="statusscope.row.status==0?true:false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="switchChange(statusscope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="user_type_name" label="身份"></el-table-column>
        <el-table-column prop="create_time" label="注册时间" min-width="150px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="deleUser">
            <el-tooltip content="修改用户" placement="top-start">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
                @click="edit(deleUser.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除用户" placement="top-start">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="del(deleUser.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background
                     layout="total,prev, pager, next"
                     :page-size="list.pageSize"
                     :total="list.total"
                     @current-change="pageChange">
      </el-pagination>
    </el-card>

    <!-- 添加用户的对话框 -->
    <el-dialog title="维护用户" :visible.sync="dialogAddVisible" width="500px">
      <el-form :model="saveForm" status-icon :rules="saveRules" ref="saveForm" size="small">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="saveForm.username" placeholder="请输入用户名" :disabled="saveForm.username_d"></el-input>
        </el-form-item>
        <el-form-item label="昵称：" prop="nickname">
          <el-input
            prefix-icon="el-icon-user-solid"
            type="text"
            v-model="saveForm.nickname"
            autocomplete="off"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input
            prefix-icon="el-icon-s-cooperation"
            type="password"
            v-model="saveForm.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible=false" size="small">取 消</el-button>
        <el-button type="primary" @click="saveSubmitForm" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {user, status} from "../../request";

export default {
  data() {
    return {
      search: {}, list: {total: 0, pageSize: 15, data: []}, saveForm: {},
      dialogAddVisible: false,
      saveRules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {min: 3, max: 16, message: "姓名长度在2~16之间！", trigger: "blur"}
        ],
        nickname: [
          {required: true, message: "请输入昵称", trigger: "blur"},
          {min: 3, max: 16, message: "姓名长度在2~16之间！", trigger: "blur"}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 3, max: 16, message: "密码长度在3~16之间！", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.getUserlist();
  },
  methods: {
    /**
     * 格式化输出
     */
    dateFormatter(row, column, cellValue, index) {
      return cellValue ? cellValue : '';
    },
    emptyFormatter(row, column, cellValue, index) {
      return cellValue ? cellValue : '#'
    },
    /**
     * 用户列表
     */
    async getUserlist() {
      const data = await user.list(this.search);
      if (data.code == status.SUCCESS) {
        this.list.data = data.data.data;
        this.list.total = data.data.total;
      }
    },
    pageChange(page) {
      this.search.page = page;
      this.getUserlist();
    },
    /**
     * 更改状态
     */
    async switchChange(obj) {
      obj.status = obj.status ? 0 : 1;
      const data = await user.updateStatus({id: obj.id, status: obj.status});
      if (data.code == status.SUCCESS) {
        this.$message.success(data.msg);
      }
    },
    /**
     * 显示添加框
     */
    showAddUserDialog() {
      this.saveForm = {};
      this.saveForm.username_d = false;
      this.saveForm.user_type = 1;
      this.dialogAddVisible = true;
      this.$refs.saveForm.clearValidate();
    },
    /**
     * 添加用户
     */
    saveSubmitForm() {
      this.$refs.saveForm.validate(async valid => {
        if (!valid) return this.$message.error("请输入必填信息！");

        const data = await user.save(this.saveForm);
        if (data.code == status.SUCCESS) {
          this.$message.success(data.msg);
          this.$refs.saveForm.resetFields();
          this.$refs.saveForm.clearValidate();
          this.dialogAddVisible = false;
          this.getUserlist();
        }
      });
    },
    /**
     * 编辑
     * @param row
     */
    edit(row) {
      this.saveForm.username_d = true;
      this.saveForm.username = row.username;
      this.saveForm.nickname = row.nickname;
      this.dialogAddVisible = true;
      this.$refs.saveForm.clearValidate();
    },
    /**
     * 删除用户
     * @param obj
     */
    del(row) {
      this.$confirm("你确定要删除用户：" + row.nickname + "吗？", "提示", {type: "warning"})
        .then(async () => {
          const data = await user.del({id: row.id});
          if (data.code != status.SUCCESS) {
            this.$message.success(data.msg);
            this.getUserlist();
          }
        })
        .catch(() => {
        });
    },
  }
};
</script>

<style>
</style>
